import React, { Component } from 'react'
import NavBar from "./nav-bar/index"
import NavBar2 from "./nav-bar2/index"
export class App extends Component {
  render() {
    return (
      <div>
        {/* 
        React对于这种需要插槽的情况非常灵活，有两种方案可以实现
        组件的children子元素;
        口 props属性传递React元素 
        
        注意： 多个元素  hildren是数组
              单个元素  children是单个对象
        */}
        {/* 1，使用children 实现插槽 */}
        <NavBar>
           <button>按钮</button>
           <h2>我是表安提</h2>
           <i>斜体</i>
        </NavBar>
        {/* 2.使用props实现插槽 */}
        <NavBar2 leftSlot={<button>按钮2</button>} centerSlot={<h2>222</h2>} rightSlot={ <i>斜体2</i> }></NavBar2>
      </div>
    )
  }
}

// function createElement(type,config,children) {
//   arguments.length -2
// }
export default App